<!-- 今日票房-->
<template>
  <div>
    <sn-text
        :font-size="30"
        font-color="#F76C6C"
        class="margin-bottom-20"
        text="今日票房"/>
    <sn-row-has-four-col :one="10" :two="14" :gutter="0">
      <div slot="one-col">
        <el-image :src="firstImage" class="first-image"/>
        <i class="ranking-top-icon"/>
      </div>
      <div slot="two-col" class="box-office-first">
        <div class="to-flex">
          <sn-text
              :font-size="19"
              :move-down="10"
              class="margin-bottom"
              text="送你一朵小红花"/>
        </div>
        <div class="to-flex">
          <sn-text
              :move-down="10"
              text="267.52"
              font-color="#F76C6C"/>
          <sn-text
              :move-down="10"
              text="万"
              font-color="#F76C6C"/>
        </div>
      </div>
    </sn-row-has-four-col>
    <!-- 第二-->
    <sn-row-has-four-col :one="2" :two="21" :three="1">
      <sn-text
          text="2"
          :font-size="20"
          slot="one-col"
          class="ranking-third"/>
      <sn-text
          :font-size="19"
          text="大红包"
          slot="two-col"/>
      <div slot="three-col" class="to-flex">
        <sn-text text="193.52" font-color="#F76C6C"/>
        <sn-text text="万" font-color="#F76C6C"/>
      </div>
    </sn-row-has-four-col>
    <!-- 第三-->
    <sn-row-has-four-col :one="2" :two="21" :three="1" :four="0">
      <sn-text
          text="3"
          :font-size="20"
          slot="one-col"
          class="ranking-third"/>
      <sn-text
          :font-size="19"
          text="拆弹专家2"
          slot="two-col"/>
      <div slot="three-col" class="to-flex">
        <sn-text text="189.64" font-color="#F76C6C"/>
        <sn-text text="万" font-color="#F76C6C"/>
      </div>
    </sn-row-has-four-col>
    <!-- 第四-->
    <sn-row-has-four-col :one="2" :two="21" :three="1" :four="0">
      <sn-text
          text="4"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <sn-text
          :font-size="19"
          text="许愿神龙"
          slot="two-col"/>
      <div slot="three-col" class="to-flex">
        <sn-text text="153.86" font-color="#F76C6C"/>
        <sn-text text="万" font-color="#F76C6C"/>
      </div>
    </sn-row-has-four-col>
    <!-- 第五-->
    <sn-row-has-four-col :one="2" :two="21" :three="1" :four="0">
      <sn-text
          text="5"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <sn-text
          :font-size="19"
          text="没有过不去的年"
          slot="two-col"/>
      <div slot="three-col" class="to-flex">
        <sn-text text="139.49" font-color="#F76C6C"/>
        <sn-text text="万" font-color="#F76C6C"/>
      </div>
    </sn-row-has-four-col>
  </div>
</template>

<script>
export default {
  name: "TodayBoxOffice",
  data() {
    return {
      firstImage: "https://p0.meituan.net/movie/df84690ded848edf709187eae23a7969866455.jpg@464w_644h_1e_1c"
    }
  },
}
</script>

<style scoped lang="less">
/*  排名 */
.ranking-third {
  font-weight: bold;
  color: #F76C6C;
  font-size: 16.5px;
  font-style: italic;
}

.ranking {
  font-weight: bold;
  color: #999;
  font-size: 16.5px;
  font-style: italic;
}

.first-image {
  height: 82px;
  width: 125px;
}

.box-office-first {
  border: #EFEFEF 1px solid;
  height: 60px;
  width: 210px;
  padding: 10px 0 10px 20px;
}

.ranking-top-icon {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 25px;
  background: url() no-repeat;
  background-size: contain;
}
</style>